<template>
  <input type="color" v-model="colorVal">
  <hr>
  <input type="color" v-model="colorVal2">
</template>

<script setup lang='ts'>
import { getCurrentInstance } from 'vue'
import { ref, reactive, watch } from 'vue'
import { bus } from '../../Bus'

const instance = getCurrentInstance()

// 使用自定义bus
const colorVal = ref('#009922')
watch(colorVal, (newVal) => {
  bus.emit('changeColor', newVal)
})



// 使用mitt
const colorVal2 = ref('#125585')
watch(colorVal2, (newVal) => {
  instance?.proxy?.$bus.emit('on-changeColor', newVal)
})


</script>

<style lang='scss' scoped>

</style>